<template>
  <div v-show="flagShowOrhide">
    <el-card style="margin: 3px 8px">
      <!-- 上方搜索项 -->
      <Search
        :list="formList.list"
        @submitForm="searchPage"
        @resetForm="resetForm"
        ref="search"
      >
        <div class="box-slot">
          <div class="box-item">
            <Form
              :listForm="formArr"
              :defaultValue="defaultValue"
              @submitFormValue="searchPage1"
              ref="formLockl"
            ></Form>
          </div>
        </div>
      </Search>
    </el-card>
    <div class="full">
      <div class="left">
        <category @getTreeDetails="getTreeDetails" @uplTreeId="uplTreeId" />
      </div>
      <div class="content">
        <my-table @introductionRow="introductionRow" />
      </div>
    </div>
  </div>
  <div style="margin: 3px 8px" v-show="!flagShowOrhide">
    <el-alert
      title="表头配置"
      type="success"
      description="根据自己所需添加列"
      show-icon
    />
    <!-- 按钮组 -->
    <div style="margin: 5px 0">
      <el-button type="primary" :icon="Plus" @click="add">新增</el-button>
      <el-button :icon="Setting" @click="draggableVisible = true"
        >列表设置</el-button
      >
      <el-button :icon="Back" @click="getBack">返回</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        height="500"
        max-height="100%"
        border
        stripe
        v-loading="loading"
        element-loading-text="加载中..."
      >
        <el-table-column
          type="index"
          width="75"
          label="序号"
          align="center"
          fixed
        />
        <el-table-column
          prop="title"
          label="列标题"
          width="150"
          align="center"
          fixed
        />
        <el-table-column
          prop="field"
          label="字段key"
          width="180"
          align="center"
          fixed
        />
        <el-table-column
          prop="type"
          label="字段类型"
          width="120"
          align="center"
        />
        <el-table-column prop="width" label="宽度" width="120" align="center" />
        <el-table-column
          prop="align"
          label="对齐方式"
          width="120"
          align="center"
        />
        <el-table-column
          prop="sequence"
          label="顺序"
          width="120"
          align="center"
        />
        <el-table-column
          prop="fixed"
          label="固定方式"
          width="120"
          align="center"
        />
        <el-table-column
          prop="visible"
          label="是否显示"
          width="130"
          align="center"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.visible"
              @change="
                uplSwitchRow({
                  id: scope.row.id,
                  visible: scope.row.visible,
                  departmentOrRoleId: sqlTableRow.departmentOrRoleId,
                })
              "
              size="small"
              active-text="开启"
              inactive-text="关闭"
            />
          </template>
        </el-table-column>

        <el-table-column
          prop="sortable"
          label="是否可排序"
          width="120"
          align="center"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.sortable"
              @change="
                uplSwitchRow({
                  id: scope.row.id,
                  sortable: scope.row.sortable,
                  departmentOrRoleId: sqlTableRow.departmentOrRoleId,
                })
              "
              size="small"
              active-text="开启"
              inactive-text="关闭"
            />
          </template>
        </el-table-column>

        <el-table-column
          prop="showHeaderOverflow"
          label="表头超出隐藏"
          width="120"
          align="center"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.showHeaderOverflow"
              @change="
                uplSwitchRow({
                  id: scope.row.id,
                  showHeaderOverflow: scope.row.showHeaderOverflow,
                  departmentOrRoleId: sqlTableRow.departmentOrRoleId,
                })
              "
              size="small"
              active-text="开启"
              inactive-text="关闭"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="showOverflow"
          label="内容超出隐藏"
          width="120"
          align="center"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.showOverflow"
              @change="
                uplSwitchRow({
                  id: scope.row.id,
                  showOverflow: scope.row.showOverflow,
                  departmentOrRoleId: sqlTableRow.departmentOrRoleId,
                })
              "
              size="small"
              active-text="开启"
              inactive-text="关闭"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="resizable"
          label="是否拖动列宽"
          width="120"
          align="center"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.resizable"
              @change="
                uplSwitchRow({
                  id: scope.row.id,
                  resizable: scope.row.resizable,
                  departmentOrRoleId: sqlTableRow.departmentOrRoleId,
                })
              "
              size="small"
              active-text="开启"
              inactive-text="关闭"
            /> </template
        ></el-table-column>
        <el-table-column
          prop="searchable"
          label="是否可搜索"
          width="120"
          align="center"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.searchable"
              @change="
                uplSwitchRow({
                  id: scope.row.id,
                  searchable: scope.row.searchable,
                  departmentOrRoleId: sqlTableRow.departmentOrRoleId,
                })
              "
              size="small"
              active-text="开启"
              inactive-text="关闭"
            /> </template
        ></el-table-column>

        <el-table-column prop="slots" label="插槽" width="120" align="center" />

        <el-table-column
          prop="defaultValue"
          label="默认值"
          width="120"
          align="center"
        />
        <el-table-column
          prop="fieldDescribe"
          label="字段描述"
          align="center"
          width="220"
        />
        <el-table-column fixed="right" label="操作" align="center" width="120">
          <template #default="scope">
            <el-button
              type="warning"
              size="small"
              link
              @click="uplRowList(scope.row)"
              >修改</el-button
            >
            <el-button
              type="danger"
              size="small"
              link
              @click="delRowList(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <!-- 添加弹框 -->
  <el-dialog
    v-model="dialogVisible"
    title="新增"
    width="80%"
    draggable
    :before-close="handleClose"
  >
    <!-- inline -->
    <el-form
      label-width="120"
      :model="formInline"
      :rules="rules"
      ref="ruleFormRef"
      class="demo-form-inline"
    >
      <el-form-item label="列标题:" prop="title">
        <el-input v-model="formInline.title" placeholder="请输入列标题" />
      </el-form-item>
      <!-- <el-form-item label="字段key:" prop="field">
        <el-input v-model="formInline.field" placeholder="请输入字段key" />
      </el-form-item> -->
      <el-form-item label="字段类型:">
        <el-select
          v-model="formInline.type"
          filterable
          clearable
          placeholder="请选择字段类型"
          style="width: 100%"
        >
          <el-option label="序号" value="seq" />
          <el-option label="复选框" value="checkbox" />
          <el-option label="单选框" value="radio" />
          <el-option label="展开行" value="expand" />
          <el-option label="HTML标签" value="html" />
        </el-select>
      </el-form-item>
      <el-form-item label="列宽度:" prop="width">
        <el-input v-model="formInline.width" placeholder="请输入列宽度" />
      </el-form-item>
      <el-form-item label="对齐方式:" prop="align">
        <el-select
          v-model="formInline.align"
          filterable
          clearable
          placeholder="请选择对齐方式"
          style="width: 100%"
        >
          <el-option label="左对齐" value="left" />
          <el-option label="居中" value="center" />
          <el-option label="右对齐" value="right" />
        </el-select>
      </el-form-item>
      <el-form-item label="固定方式:">
        <el-select
          v-model="formInline.fixed"
          filterable
          clearable
          placeholder="请选择对齐方式"
          style="width: 100%"
        >
          <el-option label="固定左侧" value="left" />
          <el-option label="固定右侧" value="right" />
        </el-select>
      </el-form-item>
      <el-form-item label="插槽:">
        <el-input v-model="formInline.slots" placeholder="请输入插槽" />
      </el-form-item>
      <el-form-item label="是否显示:">
        <el-switch
          v-model="formInline.visible"
          active-text="开启"
          inactive-text="关闭"
        />
      </el-form-item>
      <el-form-item label="是否可排序:">
        <el-switch
          v-model="formInline.sortable"
          active-text="开启"
          inactive-text="关闭"
        />
      </el-form-item>
      <el-form-item label="表头超出隐藏:">
        <el-switch
          v-model="formInline.showHeaderOverflow"
          active-text="开启"
          inactive-text="关闭"
        />
      </el-form-item>
      <el-form-item label="内容超出隐藏:">
        <el-switch
          v-model="formInline.showOverflow"
          active-text="开启"
          inactive-text="关闭"
        />
      </el-form-item>
      <el-form-item label="是否拖动列宽:">
        <el-switch
          v-model="formInline.resizable"
          active-text="开启"
          inactive-text="关闭"
        />
      </el-form-item>
      <el-form-item label="默认值:">
        <el-input
          v-model="formInline.defaultValue"
          placeholder="请输入默认值"
        />
      </el-form-item>
      <el-form-item label="描述:">
        <el-input
          v-model="formInline.describeStr"
          :rows="1"
          type="textarea"
          placeholder="请输入描述"
        />
      </el-form-item>
      <el-form-item label="对应字段:">
        <el-checkbox
          v-model="checkAll"
          :indeterminate="isIndeterminate"
          @change="handleCheckAllChange"
          >选择</el-checkbox
        >
        <el-checkbox-group
          v-model="formInline.map"
          @change="handleCheckedCitiesChange(formInline.map)"
        >
          <el-checkbox
            v-for="(item, idx) in selectColumnList"
            :key="idx"
            :label="item.COLUMN_COMMENT"
            :name="item.COLUMN_NAME"
            :disabled="item.disabled"
          ></el-checkbox>
        </el-checkbox-group>

        <!-- <el-checkbox-group
          v-model="formInline.map"
          @change="changeCheckbox(formInline.map)"
        >
          <el-checkbox
            v-for="(item, idx) in selectColumnList"
            :key="idx"
            :label="item.COLUMN_COMMENT"
            :name="item.COLUMN_NAME"
            :disabled="item.disabled"
            checked
          ></el-checkbox>
        </el-checkbox-group> -->
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogOk(ruleFormRef)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 修改弹框 -->
  <el-dialog
    v-model="uplDialogVisible"
    title="修改"
    width="70%"
    draggable
    :before-close="handleUplClose"
  >
    <el-form
      label-width="120"
      :model="uplFormInline"
      :rules="rules"
      ref="ruleFormRef"
      class="demo-form-inline"
    >
      <el-form-item label="列标题:" prop="title">
        <el-input
          v-model="uplFormInline.list.title"
          placeholder="请输入列标题"
        />
      </el-form-item>
      <el-form-item label="字段类型:">
        <el-select
          v-model="uplFormInline.list.type"
          filterable
          clearable
          placeholder="请选择字段类型"
          style="width: 100%"
        >
          <el-option label="序号" value="seq" />
          <el-option label="复选框" value="checkbox" />
          <el-option label="单选框" value="radio" />
          <el-option label="展开行" value="expand" />
          <el-option label="HTML标签" value="html" />
        </el-select>
      </el-form-item>
      <el-form-item label="列宽度:" prop="width">
        <el-input
          v-model="uplFormInline.list.width"
          placeholder="请输入列宽度"
        />
      </el-form-item>
      <el-form-item label="对齐方式:" prop="align">
        <el-select
          v-model="uplFormInline.list.align"
          filterable
          clearable
          placeholder="请选择对齐方式"
          style="width: 100%"
        >
          <el-option label="左对齐" value="left" />
          <el-option label="居中" value="center" />
          <el-option label="右对齐" value="right" />
        </el-select>
      </el-form-item>
      <el-form-item label="固定方式:">
        <el-select
          v-model="uplFormInline.list.fixed"
          filterable
          clearable
          placeholder="请选择对齐方式"
          style="width: 100%"
        >
          <el-option label="固定左侧" value="left" />
          <el-option label="固定右侧" value="right" />
        </el-select>
      </el-form-item>
      <el-form-item label="插槽:">
        <el-input v-model="uplFormInline.list.slots" placeholder="请输入插槽" />
      </el-form-item>
      <el-form-item label="默认值:">
        <el-input
          v-model="uplFormInline.list.defaultValue"
          placeholder="请输入默认值"
        />
      </el-form-item>
      <el-form-item label="描述:">
        <el-input
          v-model="uplFormInline.list.fieldDescribe"
          :rows="2"
          type="textarea"
          placeholder="请输入描述"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="uplDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="uplDialogRow"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 拖拽排序弹框 -->
  <el-dialog v-model="draggableVisible" title="拖拽排序" width="50%" draggable>
    <el-alert
      title="提示"
      type="success"
      description="初始化顺序状态根据添加顺序排序,拖拽排序从左至右~"
      show-icon
      style="margin-bottom: 5px"
    />
    <draggable
      v-model="myArray.list"
      group="people"
      @start="drag = true"
      @end="drag = false"
      item-key="id"
      animation="300"
      class="draggable-list"
    >
      <template #item="{ element }">
        <div class="draggable-item">{{ element.title }}</div>
      </template>
    </draggable>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="draggableVisible = false">取消</el-button>
        <el-button type="primary" @click="orderingDetermination">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, getCurrentInstance } from "vue";
import type { FormInstance, FormRules } from "element-plus";
// 引入自定义请求库
import {
  postAction,
  putAction,
  getAction,
  deleteAction,
} from "@/utils/system/commonUse";
import { Plus, Back, Message, Setting } from "@element-plus/icons-vue";
import Category from "./modules/tree.vue";
import myTable from "./modules/table.vue";
import { ElMessage } from "element-plus";
// 拖拽排序
import draggable from "vuedraggable";
// 引入search 组件
import Search from "@/components/basePage/packageSearch/index.vue";
// 引入form 组件
import Form from "@/components/basePage/packageForm/index.vue";

// 搜索项
const formList = reactive({
  list: [
    {
      label: "表格编码",
      model: "tgNo",
      placeholder: "请输入表格编码",
    },
    {
      label: "表格名称",
      model: "tgNo51",
      placeholder: "请输入表格名称",
    },
    {
      label: "创建人",
      model: "creator",
      placeholder: "请输入创建人",
    },
  ],
});
// 表单数据
const formArr = reactive([
  {
    label: "1",
    model: "tgNo",
    placeholder: "请输入项目名称",
  },
  {
    type: "select",
    label: "单选",
    model: "radioModule",
    // 控制是否需要选中下拉后就请求数据
    isSelectChange: true,
    options: [
      {
        value: "txt",
        label: "文本",
      },
      {
        value: "狮子",
        label: "狮子",
      },
      {
        value: "老虎",
        label: "老虎",
      },
    ],
  },
]);
const ruleFormRef = ref<FormInstance>();
// 对应的列
const selectColumnList = ref(Array());

// 全选 | 反选
const checkAll = ref(false);
const isIndeterminate = ref(false);
// const formInline.map = ref(["Shanghai", "Beijing"]);
// const selectColumnList = ["Shanghai", "Beijing", "Guangzhou", "Shenzhen"];

const handleCheckAllChange = (val: any) => {
  console.log("val", val);
  if (val) {
    let arr = Array();
    selectColumnList.value.map((item: any) => {
      if (item.disabled != true) {
        arr.push(item.COLUMN_COMMENT);
      }
    });

    formInline.map = arr;

    console.log(arr);
  } else {
    formInline.map = [];
  }
  isIndeterminate.value = false;
  // formInline.map = val
  //   ? selectColumnList.value.map((item: any) => item.COLUMN_COMMENT)
  //   : [];
};
const handleCheckedCitiesChange = (value: string[] | number[]) => {
  const checkedCount = value.length;
  console.log("checkedCount", checkedCount);

  checkAll.value = checkedCount === selectColumnList.value.length;
  isIndeterminate.value =
    checkedCount > 0 && checkedCount < selectColumnList.value.length;
  // 改变后 进来先赋值空
  watchCheckbox.value = Array();
  // 添加后端所需要的值
  for (const item of value) {
    for (let index = 0; index < selectColumnList.value.length; index++) {
      if (
        selectColumnList.value[index].COLUMN_COMMENT == item &&
        !selectColumnList.value[index].disabled
      ) {
        watchCheckbox.value.push(selectColumnList.value[index]);
      }
    }
  }
  console.log(" watchCheckbox.value", watchCheckbox.value);
};
const selectCheckBox = ref(false);

// 数据列加载中
const loading = ref(false);

// 添加弹框
const dialogVisible = ref(false);
const formInline = reactive({
  title: "", //列标题
  // field: "", //字段key
  type: "", //字段类型
  width: "180", //列宽
  align: "center", //居中
  visible: true, //是否显示
  sortable: true, //是否排序
  showHeaderOverflow: true, //是否表头超出隐藏
  showOverflow: true, //是否内容超出
  resizable: true, //拖动列宽
  fixed: "", //固定方式
  slots: "", //插槽
  defaultValue: "", //默认值
  describeStr: "", //描述
  map: Array(),
});
// 修改弹框默认值
const uplFormInline = reactive({
  list: {
    title: "", //列标题
    type: "", //字段类型
    width: "", //列宽
    align: "", //居中
    fixed: "", //固定方式
    defaultValue: "", //默认值
    fieldDescribe: "", //描述
    slots: "", //插槽
  },
});
// 监听元素变化
const watchCheckbox = ref(Array());
const rules = reactive<FormRules>({
  tableCode: [{ required: true, message: "请填写表格编码", trigger: "blur" }],
  tableNameStr: [{ required: true, message: "请填写表名", trigger: "blur" }],
  height: [{ required: true, message: "请填写高度", trigger: "blur" }],
  maxHeight: [{ required: true, message: "请填写最高高度", trigger: "blur" }],
});

const url = reactive({
  getTableColumnApi: "/dynamic/metaTable/listTableColumn",
  getTableColumnListApi: "/dynamic/columnDescription/quaryColumnByTableCode",
  saveApi: "/dynamic/columnDescription/saveColumnDescription",
  uplTableRowApi: "/dynamic/columnDescription/update",
  getOrderListApi: "/dynamic/columnDescription/queryIdAndTitle",
  delRowApi: "/dynamic/columnDescription/delete",
  uplOrderApi: "/dynamic/columnDescription/updateList",
});

// 确认提交
const dialogOk = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (!valid) {
      return;
    }
    // 此方式去除 map   少穿一个参数
    let { map, ...params } = formInline;
    postAction(
      url.saveApi,
      Object.assign(
        {
          correspondingField: watchCheckbox.value,
          tableCode: sqlTableRow.tableCode,
          departmentOrRoleId: sqlTableRow.departmentOrRoleId,
        },
        params
      )
    )
      .then((data: any) => {
        console.log("添加===>", data);
        if (data.code != 1000) {
          return ElMessage.error(data.msg);
        }
        getTableColumnList();
        dialogVisible.value = false;
        ElMessage({
          message: data.msg,
          type: "success",
        });
      })
      .catch((err) => {
        console.log(err);
        ElMessage.error("新增失败");
      });
  });
};
// 多选改变触发
const changeCheckbox = (value: string[] | number[]) => {
  // console.log(selectColumnList.value);
  // 改变后 进来先赋值空
  watchCheckbox.value = Array();
  // 添加后端所需要的值
  for (const item of value) {
    for (let index = 0; index < selectColumnList.value.length; index++) {
      if (
        selectColumnList.value[index].COLUMN_COMMENT == item &&
        !selectColumnList.value[index].disabled
      ) {
        watchCheckbox.value.push(selectColumnList.value[index]);
      }
    }
  }
};

// 关闭前
const handleClose = (done: () => void) => {
  done();
};
// 列详情数据
const tableData = ref(Array());
// 默认值
const defaultValue = reactive({});
// 可以取到子组件传递过来的数据
const searchPage = (ruleForm: any) => {
  console.log(ruleForm, "ruleForm");
  // this.getList(ruleForm);
};
// 可以取到子组件传递过来的数据
const searchPage1 = (ruleForm: any) => {
  console.log(ruleForm, "ruleForm===>");
  // this.getList(ruleForm);
};
//获取bus 实例
const Instance = getCurrentInstance()!;
// 重置表单后回调
const resetForm = () => {
  Instance.appContext.config.globalProperties.$bus.emit("resetForm", 213);
};
// 控制显示隐藏
const flagShowOrhide = ref(true);
// 保存表名
const sqlTableRow = reactive({
  sqlTableName: "",
  tableCode: "",
  // 保存树状图id
  departmentOrRoleId: "",
});
/**
 * 获取子组件的行内数据
 */
const introductionRow = (row: any) => {
  // console.log("row", row);
  sqlTableRow.sqlTableName = row.sqlTableName;
  sqlTableRow.tableCode = row.tableCode;

  flagShowOrhide.value = false;

  getTableColumnList();
  getOrderList();
};
/**
 * 获取树状图id 修改父页面tree id
 */
const uplTreeId = (id: string) => {
  sqlTableRow.departmentOrRoleId = id;
};
// 控制修改弹框  显示与隐藏
const uplDialogVisible = ref(false);
/**
 * 修改弹框关闭前
 */
const handleUplClose = (done: Function) => {
  done();
};
/**
 * 单击修改
 */
const uplRowList = (row: any) => {
  console.log(row);
  uplFormInline.list = { ...row };
  uplDialogVisible.value = true;
};
/**
 * 开关触发改变行数据
 */
const uplSwitchRow = (row: any) => {
  console.log(row, "触发行改变");
  uplTableRow(row);
};
// 返回
const getBack = () => {
  flagShowOrhide.value = true;
};
/**
 * 添加
 */
const add = () => {
  postAction(
    `${url.getTableColumnApi}`,
    {},
    {
      params: {
        tableName: sqlTableRow.sqlTableName,
        tableCode: sqlTableRow.tableCode,
        departmentOrRoleId: sqlTableRow.departmentOrRoleId,
      },
    }
  )
    .then((data: any) => {
      console.log("getOptionsList===>", data);
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      selectColumnList.value = data.data;
      // watchCheckbox.value = data.data;
      dialogVisible.value = true;
    })
    .catch((err) => {
      console.log(err);
      ElMessage.error("获取数据失败");
    });
};
/**
 * 获取动态列表格数据
 */
const getTableColumnList = () => {
  loading.value = true;
  getAction(`${url.getTableColumnListApi}`, {
    tableCode: sqlTableRow.tableCode,
    departmentOrRoleId: sqlTableRow.departmentOrRoleId,
  })
    .then((data: any) => {
      // console.log("list===>", data);
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      tableData.value = data.data;
      loading.value = false;
    })
    .catch((err) => {
      console.log(err);
      ElMessage.error("获取数据失败");
      loading.value = false;
    });
};
/**
 * 修改单行数据
 */
const uplTableRow = (row: any, typeFlag: Boolean = false) => {
  putAction(url.uplTableRowApi, row)
    .then((data: any) => {
      if (data.code != 1000) {
        return ElMessage.error("修改失败");
      }
      if (typeFlag) {
        uplDialogVisible.value = false;
        getTableColumnList();
      }
      ElMessage.success("修改成功");
    })
    .catch((err) => {
      console.log("err==>", err);
      ElMessage.error("修改失败");
    });
};
/**
 * 删除行 数据
 */
const delRowList = (id: string) => {
  deleteAction(`${url.delRowApi}/${id}`)
    .then((data: any) => {
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      getTableColumnList();
      ElMessage.success("删除成功");
    })
    .catch((err) => {
      console.log("err===>", err);
      ElMessage.error("删除失败");
    });
};
/**
 * 修改弹框 确认
 */
const uplDialogRow = async () => {
  uplTableRow(uplFormInline.list, true);
};
/**
 * 获取树形状态树
 */
const getTreeDetails = (data: any) => {
  sqlTableRow.departmentOrRoleId = data.id;
  // console.log(data);
};
// ==================================================拖拽内容区==============================================================
// 控制拖拽弹框顺序
const draggableVisible = ref(false);
const drag = ref(false);
const myArray = reactive({
  list: Array(),
});
/**
 * 获取排序列表数据
 */
const getOrderList = () => {
  getAction(url.getOrderListApi, {
    tableCode: sqlTableRow.tableCode,
  })
    .then((result: any) => {
      if (result.code != 1000) {
        return ElMessage.error(result.msg);
      }
      myArray.list = result.data;
      console.log("result==>", result);
    })
    .catch((err) => {
      console.log("err==>", err);
      ElMessage.error("获取排序列表失败");
    });
};
/**
 * 排序确认
 */
const orderingDetermination = () => {
  // 先给本身数据 添加后端需要的排序顺序 属性
  for (let index = 0; index < myArray.list.length; index++) {
    myArray.list[index].sequence = index + 1;
  }
  console.log("myArray.list", myArray.list);

  putAction(url.uplOrderApi, myArray.list)
    .then((data: any) => {
      console.log("data==>", data);
      if (data.code != 1000) {
        return ElMessage.error(data.msg);
      }
      getTableColumnList();
      draggableVisible.value = false;
      ElMessage.success(data.msg);
    })
    .catch((err) => {
      console.log("err==>", err);
      ElMessage.error("排序失败");
    });
};
</script>

<style lang="scss" scoped>
.full {
  width: 100%;
  height: 86%;
  box-sizing: border-box;
  padding: 2px 10px;
  display: flex;
  .left {
    width: 250px;
  }
  .content {
    flex: 1;
    width: calc(100% - 250px);
    height: 100%;
  }
}
.demo-form-inline {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 50%;
  }
  .el-form-item:last-child {
    width: 100%;
  }
}

// 拖拽

.draggable-item:hover {
  background-color: #f1f1f1;
  cursor: move;
}

.chosen {
  border: solid 2px #3089dc !important;
}
.draggable-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.draggable-item {
  text-align: center;
  padding: 6px;
  width: 46%;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}
</style>
